<!--我的账户Individual_account-->
<template>
  <div class="account">
     <div class="account-header">
       <mt-header title="我的账户">
         <router-link to="/my" slot="left">
           <mt-button icon="back"></mt-button>
         </router-link>
       </mt-header>
     </div>
    <div class="account-info">
      <div class="info-top">
        <i class="iconfont icon-qiandai"></i><span>账户余额（元）:</span>
      </div>
      <div class="info-center">
        <strong>{{message.price}}</strong>
      </div>
      <div class="info-buttom">
         <router-link to='/rechargeMoney' tag="div"><button>充值</button></router-link>
        <router-link to='/drawMoney' tag="div"><button>提现</button></router-link>
      </div>
    </div>
    <div class="account-message">
      <div  class="message-all">
        <div class="message-title">
          <p>账单明细</p>
        </div>
        <div class="message-item">
          <ul>
            <li v-for='(item,key) in message.list' :key='key'>
              <div class="item-l">
                <i class="iconfont icon-jindutiaoqiandai subtract"></i>
                <p><span></span>{{item.price}}</p>
                <p>{{item.remark}}</p>
              </div>
              <div class="item-r">
                <p>{{item.day}}</p>
                <p>{{item.time}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>暂无更多</p>
    </div>
  </div>
</template>
<script typy="text/ecmascript-6">
export default{
    data () {
        return {
            message:''
        }
    },
    methods:{

    },
    created(){
        const that = this;
        const url = that.getUrl('home/account');
        let params = {
            token:that.getToken()
        }

        that.$http.post(url,params,{emulateJSON: true}).then(res => {
            if(res.data.code === 0){
                that.message = res.data.data;
            }else {
                that.$messagebox('提示', res.data.errMsg);
            }
        },err => {
            that.$messagebox('提示', '找不到服务器，请稍后尝试');
        })

    }


}
</script>
<style  lang="less" rel="stylesheet/less">
  @import "../../lib/less/variable";
  .account{
    width: 100%;
    .account-header{
      .mb(10);
      header{
        background: #Fff;
        color: #666;
      }
    }
    .account-info{
      width: 100%;
      background: #fff;
      .info-top{
        .h(35);
        .fs(16);
        color: #0E70e0;
        .padding(0,10);
        box-sizing: border-box;
        i{
          .fs(20);
          .mr(5)
        }
      }
      .info-center{
        .h(80);
        text-align: center;
        .lh(80);
        .padding(0,10);
        box-sizing: border-box;
        strong{
          .fs(35);
          color: #0F7ADA;
        }
      }
      .info-buttom{
        .h(40);
        box-sizing: border-box;
        div:first-child{
          border-right:1px solid #ccc;
        }
        div{
          display: inline-block;
          width: 50%;
          float: left;
          height: 100%;
          border-top:1px solid #ccc;
          button{
            display: inline-block;
            border: none;
            background: transparent;
            width: 100%;
            height: 100%;
            color: #0F7ADA;
            .fs(16);
            vertical-align: super;
          }
        }
      }
    }
    .account-message{
      width: 100%;
      .message-all{
        .message-title{
          .h(40);
          .lh(38);
          .fs(16);
          .padding(0,10);
          box-sizing: border-box;
        }
        .message-item{
          width: 100%;
          background: #fff;

          ul{
            .padding(0,10);
            box-sizing: border-box;
            li{
              .h(60);
              border-bottom:1px solid #ccc;
              div{
                float: left;
              }
              .item-l{
                width:70%;
                p{
                  .ml(50);
                  font-weight: bold;
                  span{
                    vertical-align: baseline;
                  }
                }
                p:last-child{
                  position: relative;
                  .top(-10);
                  font-weight: normal;
                }
              }
              .item-r{
                width:30%;
                text-align: right;
              }
              i{
                .fs(35);
                float: left;
              }
              p{
                .lh(30);
                .fs(14)
              }
              i.add{
                color: #0F7ADA;
              }
              i.subtract{
                color:#F38F00;
              }
            }
          }
        }
      }

    }
  }
</style>
